<template>
  <div id="app">
    <my-header>{{ headerTitle }}</my-header>
  </div>
  <search-input
    :placeholder="placeholder"
    :maxlength="maxlength"
  ></search-input>
  <!-- <keep-alive><router-view /></keep-alive> vue2.x的写法-->
  <!-- 缓存内容-start-vue3.0的写法 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
  <!-- 缓存内容-end -->
  <Tab />
</template>
<script>
import MyHeader from "@/components/Header";
import Tab from "@/components/Tab";
import SearchInput from "@/components/SearchInput";

import { computed, watch } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default {
  components: {
    MyHeader,
    Tab,
    SearchInput,
  },
  setup() {
    const store = useStore(),
      state = store.state,
      router = useRouter();
    router.push("/");
    store.commit("setPlaceholder", "day"); //设置搜索输入框的默认提示
    watch(
      () => {
        return router.currentRoute.value.name;
      },
      (value) => {
        store.commit("setHeaderTitle", value); //监听路由变化，动态设置顶部导航的名称
        store.commit("setPlaceholder", value); //监听路由变化，动态设置搜索框的placeholder
        store.commit("setMaxlength", value); //监听路由变化，动态设置搜索框的输入长度
        store.commit("setField", value); //监听路由变化，动态设置当前路由的模块（field:day、month、year）
        store.commit("setErrorCode", 0); //切换路由，默认设置接口返回的错误码为0（请求成功）
      }
    );
    return computed(() => state).value;
  },
};
</script>
<style lang="scss">
</style>
